<template>
    <div class="pro-search-full-box top-cmon-full">
        <div class="psf-wrap">
            <template v-if="searchData.length > 0">
                <div class="search-s-tit">历史搜索</div>
                <div class="pro-near-searchs">
                <a v-for="(str, idx) in searchData" :key="idx" @click="handleSearchByCommkey(str)"
                    :title="str">{{ str }}</a>
                </div>
            </template>
            <div class="search-s-tit">今日热搜</div>
            <div class="pro-hot-searchs">
                <a v-for="(item,index) in hotWordsList" @click="goSearchByHotKey(item.name)">{{item.name}}</a>
            </div>
            <div class="search-s-tit">热门精选</div>
            <div class="pro-hot-concentration">
                <div class="pro-hot-container">
                <a v-for="(item, idx) in fitCollections" :key="idx" @click="toGamePageByStyle(item)">
                    <img loading="lazy" :src="item.image" alt="">
                    <span>{{ item.name }}</span>
                </a>
                <a class="see-all" @click="toGamePageByStyle()">查看所有></a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import api from '@/api/api'
export default{
    data(){
        return{
            searchData:[],
            hotWordsList:[],
            fitCollections:[]
        }
    },
    async mounted(){
        this.getHisData();
        
        let res=await api.getHomeHots({pageSize:11});
		    this.hotWordsList=res.data.searchs.list;

        res=await api.getFitCollections();  //热门精选
        this.fitCollections = res.data;
    },
    methods:{
        handleSearchByCommkey(str) {
            $('#app').removeClass('is-scroll').removeClass('is-game');
            $('#app .pro-header .search-bx form').css('display','flex');
            this.$router.push({path:'/searchs?k='+str+'&t='})
        },
        goSearchByHotKey(_title){
            $('#app').removeClass('is-scroll').removeClass('is-game');
            $('#app .pro-header .search-bx form').css('display','flex');
            this.$router.push({path:'/searchs?k='+_title+'&t='})
        },
        toGamePageByStyle(item){
            if(item){
                let that=this;
                if(this.$route.name!='Home'){
                    this.$router.push({path:'/games?t=1&style='+item.name})
                }
                else{
                    this.$router.replace({path:'/games?t=1&style='+item.name})
                }
            }else{
                this.$router.replace({path:'/games'})
            }
        },
        getHisData() {
            let hisSearchData = localStorage.getItem('NEARHISRESULT')
            let hisBrowserData = localStorage.getItem('NEARBROWSERRESULT')
            if (hisSearchData) {
                hisSearchData = JSON.parse(hisSearchData)
                hisSearchData = hisSearchData.reverse()
            }
            if (hisBrowserData) {
                hisBrowserData = JSON.parse(hisBrowserData)
                hisBrowserData = hisBrowserData.reverse()
            }
            this.searchData = hisSearchData ? hisSearchData : []
            this.browserData = hisBrowserData ? hisBrowserData : []

            let isac = localStorage.getItem('ALREADY-CLOSE-CUTPIC-TIP')
            if (!isac || isac == 1) {
                this.isALREADYCLOSECUTPICTIP = true
            } else {
                this.isALREADYCLOSECUTPICTIP = false
            }
        }
    }
}
</script>

<style lang="less">
.psf-wrap {
        // background: #1C1C1E;
        // border-radius: 16px;
        // padding: 20px;
        color: #fff;

        animation: hdpanel .3s ease forwards;
        .yd-types {
          margin-bottom: 40px;
          display: flex;
          grid-gap:16px;
          a {
            line-height: 38px;
            padding: 0px 21px;
            background: #242327;
            display: inline-block;
            // margin-right: 16px;
            border-radius: 19px;
            font-size: 16px;
            // font-weight:600;
            user-select: none;
            white-space: nowrap;
            transition: .2s all linear;

            &:active {
              // opacity:.8;
            }

            &:hover {
              background: #3D3C40;
            }
          }
        }

        .search-s-tit {
          font-size: 14px;
          color: #969696;
          line-height: 20px;
          margin-bottom: 10px;
        }

        .pro-near-searchs {
          margin-bottom: 30px;
          display: flex;
          grid-gap:16px;
          flex-wrap:wrap;
          a {
            line-height: 38px;
            padding: 0px 21px;
            background: #242327;
            display: inline-block;
            // margin-right: 16px;
            border-radius: 19px;
            font-size: 14px;
            font-weight: 600;
            max-width: 150px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            transition: .2s all linear;

            &:hover {
              background: #3D3C40;
            }
          }
        }

        .pro-hot-searchs {
          margin-bottom: 30px;
          display: flex;
          grid-gap:16px;
          flex-wrap:wrap;
          a {
            line-height: 38px;
            padding: 0px 21px;
            background: #242327;
            display: inline-block;
            // margin-right: 16px;
            border-radius: 19px;
            font-size: 14px;
            transition: .2s all linear;
            // font-weight:600;
            &:hover{
              background: #3D3C40;
            }
          }
        }

        .pro-hot-concentration {
          .pro-hot-container {
            max-width: 820px;
            display: flex;
            flex-wrap: wrap;
            grid-gap:10px;
          }

          a {
            // width: 197.29px;
            width:calc((100% - 30px) / 4);
            height: 58px;
            // margin-right: 10px;
            border-radius: 8px;
            position: relative;
            display: inline-block;
            overflow: hidden;
            transition:.1s all linear;
            margin-bottom: 10px;

            &:nth-child(4n) {
              margin-right: 0px;
            }

            span {
              line-height: 58px;
              text-align: center;
              position: relative;
              z-index: 1;
              // font-weight:600;
              font-size: 14px;
              display: inline-block;
              width: 100%;
            }

            img {
              position: absolute;
              left: 0px;
              top: 0px;
              right: 0px;
              filter: blur(4px);
              opacity:.5;
              // width:100%;
              // height:100%;
              // object-fit: cover;
            }
            &:not(.see-all):hover{
              img{
                opacity:.3;
              }
            }
          }

          .see-all {
            line-height: 58px;
            text-align: center;
            background: #242327;
            // font-weight:600;
            font-size: 14px;
            &:hover{
              background:#3D3C40;
            }
          }
        }

        .pro-search-result {
          .result-item {
            padding: 0px 3px;
            height: 78px;
            display: flex;
            align-items: center;
            border-radius: 8px;
            padding-right: 22px;
            user-select: none;
            color: #fff;

            &:hover {
              background: #242327;
            }

            &.selected-key {
              background: #242327;
            }

            .img-box {
              min-width: 70px;
              margin-right: 11px;
              width: 70px;
              height: 50px;
              border-radius: 8px;
              overflow: hidden;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }

            .basic {
              width: 100%;

              .title-wrap {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .title {
                  font-size: 16px;

                  // font-weight:600;
                  ::v-deep em {
                    color: #11CCB1;
                    // margin:0px 4px;
                    font-style: normal;
                  }
                }

                .type {
                  font-size: 12px;
                  color: #969696;
                  line-height: 22px;
                  border-radius: 4px;
                  border: 1px solid #969696;
                  padding: 0px 7px;
                }
              }

              .catre {
                color: #969696;
                font-size: 14px;
                margin-top: 6px;
                line-height: 20px;
              }
            }
          }
        }
      }
</style>